<template>
	<view>
		<view class="flexcenter margin_top6 xiaohui" v-if="clws">
			<view class="main_size xioahui">您的车辆信息未完善，点击<text class="xiaohuang main_size" @click="jumpurl('/pages_mypage/tianjiachel')">去完善</text></view>
		</view>
		
		<template v-if="!clws">
			<view class="flexcolumn" v-if="list.length==0">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				<view class="xiaohui margin_top main_size">暂无数据</view>
			</view>
			<!-- <view class="mainpadding_top ffffff radius" v-for="item in list" :key="item.id" @click="jumpdetail('/pages_index/renwuxq?id=',item.id)"> -->
			<view class="mainpadding_top ffffff radius" v-for="item in list" :key="item.id" >
				<view class="flexbetween">
					<!-- <view class="labletext xiaohuang" v-if="item.task_category_id!=1">{{item.taskcategory.name}}/{{item.carattr.name}}</view>
					<view class="labletext xiaohuang" v-if="item.task_category_id==1">其他</view> -->
					<!-- 状态:1=待领取,2=平台待指定,3=进行中,4=待审核,5=已完成，6任务终止 -->
					<!-- <view class="titletext xiaohuang" v-if="item.status==1">待领取</view>
					<view class="titletext xiaohuang" v-if="item.status==2">平台待指定</view>
					<view class="titletext xiaohuang" v-if="item.status==3">进行中</view>
					<view class="titletext xiaohuang" v-if="item.status==4">待审核</view>
					<view class="titletext xiaolv" v-if="item.status==5">已完成</view>
					<view class="titletext xiaohui" v-if="item.status==6">任务终止</view> -->
					<view class="titletext xiaohui">航班号</view>
					<view class="titletext xiaolan">{{item.carno}}</view>
				</view>
				<view class="flexbetween xiahuaxian">
					<view class="titletext hei_text bold">{{item.tasktime_text}}</view>
					<view class="xiaohong bold titletext">{{item.score}}</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="xiaohei main_size">客户：{{item.passenger.name}}</view>
					<view class="xiaohuang strongtext" @click="clicktz(item)">点击通知</view>
				</view>
				<view class="xiaohei margin_top2 main_size">单位：{{item.settlement.name}}</view>
				<view class="xiaohei margin_top2 main_size"><text class="margin_right2">类型：<text class="xiaohuang">{{item.ordertype.name}}</text></text><text>车牌：<text class="xiaohuang">{{item.carinfo.car_no}}</text></text></view>
				<view class="xiaohei main_size margin_top2 textcenter ">{{item.start_time_text1}}至{{item.end_time_text1}}</view>
				<view class="flexbetween margin_top2" v-if="item.start_address">
					<view class="" style="width: 500rpx;">
						<text class="lvdian margin_right2"></text>
						<!-- <text class="xiaolv main_size margin_right2">距你{{returnKmUnit(Number(item.distance1))}}</text> -->
						<text class="xiaohei main_size margin_right2">{{item.start_address}}</text>
					</view>
					<view class="daohang" @click.stop="openmap(1,item)"></view>
				</view>
				<view class="flexbetween margin_top2" v-if="item.end_address">
					<view class="" style="width: 500rpx;">
						<text class="huangdian margin_right2"></text>
						<!-- <text class="xiaohuang main_size margin_right2">距你{{returnKmUnit(Number(item.distance2))}}</text> -->
						<text class="xiaohei main_size margin_right2">{{item.end_address}}</text>
					</view>
					<view class="daohang" @click.stop="openmap(2,item)"></view>
				</view>
				<!-- <view class=" margin_top2" style="width: 500rpx;">
					<text class="landian margin_right2"></text>
					<text class="xiaolan main_size margin_right2">{{item.name}}</text>
					<text class="xiaohei main_size margin_right2" v-show="item.task_category_id!=1">航班/车次：{{item.carno}}</text>
				</view> -->
				<view class="flexleft margin_top2">
					<text class="landian margin_right2"></text>
					<view class="xiaohei">订单支出：<text class="xiaohong">￥{{item.out_price}}</text></view>
				</view>
				<view class="xiaohei margin_top2">备注：{{item.showsj_info}}</view>
				<view class="boxhui mainpadding_top" v-if="item.taskitem.length">
					<view class="flexbetween" @click.stop="item.iszk = !item.iszk">
						<view class="xiaohui main_size">任务要求</view>
						<u-icon name="arrow-right" color="#999" size="20" v-show="!item.iszk"></u-icon>
						<u-icon name="arrow-down" color="#999" size="20" v-show="item.iszk"></u-icon>
					</view>
					<template v-if="item.iszk">
						<view class="" v-for="ite in item.taskitem" :key="ite.id">
							<view class="main_size xiaohui margin_top2">{{ite.name}}</view>
							<view class="flexleft flex_wrap">
								<view class="itemimgBox flexcenter margin_top2" v-for="(it,index) in ite.images_text"  @click.stop="lbtpriview(index,ite.images_text)">
									<view class="listleftimg">
										<image class="listleftimg radius" :src="it" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="flexright">
					<view class="qhbtn flexcenter margin_top2 margin_left1" @click="callphone(item.passenger.mobile)">联系客户</view>
					<view class="qhbtn flexcenter margin_top2 margin_left1" v-if="item.dd_startaddress_status==1" @click="currentid=item.id;showModal('是否确认是否到达起点？')">到达起点</view>
					<view class="qhbtn flexcenter margin_top2 margin_left1" v-if="item.dd_startaddress_status==2 && item.status!=2" @click="currentid=item.id;showModal('是否确认完成任务？')">完成任务</view>
				</view>
				<!-- <view class="flexbetween margin_top2">
					<view class="flexcolumn" @click.stop="callphone(item.mobile)">
						<u-icon name="phone" color="#333" size="20"></u-icon>
						<view class="xiaohui main_size">客户	</view>
					</view>
					<view class="bigbtn" style="width: 85%;" v-if="item.status==1" @click.stop="currentid=item.id;showModal('是否确认接取任务？')">接取任务</view>
					<view class="bigbtn" style="width: 85%;" v-if="item.status==3 && item.task_category_id!=1" @click.stop="currentid=item.id;showModal('是否确认完成任务？')">确认完成</view>
					<view class="bigbtn" style="width: 85%;" v-if="item.status==3 && item.task_category_id==1" @click.stop="currentid=item.id;show=true;">提交审核</view>
					<view class="bigbtn" style="width: 85%;background-color: #bbbbbb;" v-if="item.status==4" >正在审核中</view>
				</view> -->
			</view>
		</template>
		<u-modal :show="show" title="拍照上传" confirmColor="#ff8506" confirmText="确认" @confirm="upconfirm"cancelText="取消"
			@cancel="show=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上传 -->
						<view class="listleftimg">
							<image class="listleftimg radius" :src="item" mode=""></image>
							<view class="deleteimg"@click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(3,images,images_text)"
						v-if="images.length<3">
						<!-- 未上传 -->
						<image class="listleftimg radius" src="@/static/images/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name:"taskList",
		props:['list','clws'],
		data() {
			return {
				modal:{
					modalShow:false,
					title:"",
				},
				currentid:"",
				images:[],
				images_text:[],
				show:false,
				currentitem:{}
			};
		},
		methods:{
			clicktz(item){
				let that = this
				this.currentid = item.id
				this.currentitem = item
				let itemList = ['开始行程', '到达起点',"拨打电话"]
				if(item.dd_startaddress_status==2){
					itemList = ['开始行程', "完成任务","拨打电话"]
				}
				if(item.status==2){
					itemList = ['开始行程',"拨打电话"]
				}
				uni.showActionSheet({
					itemList,
					success: function(res) {
						if(itemList.length==3){
							if (res.tapIndex == 0) {
								that.openmap(2,item)
							}
							if (res.tapIndex == 1) {
								if(itemList[1]=="到达起点"){
									that.showModal('是否确认是否到达起点？')
								}else{
									that.showModal('是否确认完成任务？')
								}
							}
							if (res.tapIndex == 2) {
								that.callphone(item.passenger.mobile)
							}
						}else{
							if (res.tapIndex == 0) {
								that.openmap(2,item)
							}
							if (res.tapIndex == 1) {
								that.callphone(item.passenger.mobile)
							}
						}
						
					},
					fail: function(res) {}
				});
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				httpRequest.chooseImage(num, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						_this.uploadImageService(res[i], upImgs, upImgs_text)
					}
				}).catch(err => {});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			upconfirm(){
				this.show = false
				uni.showLoading({
					mask:true,
					title:"上传中"
				})
				httpRequest.request('/api/taskcl/submitApply', 'GET', {
					id: this.currentid,
					apply_images:this.images.join()
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.images = []
						this.images_text = []
						this.$emit('init','')
					}
				})
			},
			showModal(val){
				this.modal.title = val
				this.modal.modalShow = true
			},
			modalSure(){
				if(this.modal.title=="是否确认接取任务？"){
					this.jiequorder()
				}
				// else if(this.modal.title=="是否确认完成任务？"){
				// 	this.wancheng()
				// }
				else if(this.modal.title=="是否确认是否到达起点？"){
					this.daodaqd()
				}else if(this.modal.title=="是否确认完成任务？"){
					this.wanchengrw()
				}
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			jiequorder(){
				httpRequest.request('/api/taskcl/getTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.$emit('init','')
					}
				})
			},
			wancheng(){
				httpRequest.request('/api/taskcl/submitApply', 'GET', {
					id: this.currentid,
					apply_images:""
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.$emit('init','')
					}
				})
			},
			daodaqd(){
				httpRequest.request('/api/taskcl/ddTask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.$emit('init','')
					}
				})
			},
			wanchengrw(){
				httpRequest.request('/api/taskcl/confirmtask', 'GET', {
					id: this.currentid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.$emit('init','')
					}
				})
			},
			openmap(val,item){
				if(val==1){
					uni.openLocation({
					     latitude: Number(item.start_latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					     longitude:Number(item.start_longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					     name: item.start_address,//即将传到高德或腾讯地图的店铺名称
					     address: item.start_address,//即将传到高德或腾讯地图的详细地址
					     scale: 18
					})
				}else{
					uni.openLocation({
					     latitude: Number(item.end_latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					     longitude:Number(item.end_longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					     name: item.end_address,//即将传到高德或腾讯地图的店铺名称
					     address: item.end_address,//即将传到高德或腾讯地图的详细地址
					     scale: 18
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qhbtn {
		border-radius: 12rpx;
		background-color: #fff3e6;
		font-weight: 500;
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		color: #FF8505;
	}
</style>